<template>
	<div>
		<home-header></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list='iconList'></home-icons>
		<home-recommend :list="recommendList"></home-recommend>
		<home-weekend :list='weekendList'></home-weekend>

	</div>
</template>
<script>
	import HomeHeader from '@/pages/Home/components/Header.vue'
	import HomeSwiper from '@/pages/Home/components/Swiper.vue'
	import HomeIcons from '@/pages/Home/components/Icons.vue'
	import HomeRecommend from '@/pages/Home/components/Recommend.vue'
	import HomeWeekend from '@/pages/Home/components/Weekend.vue'
	import axios from 'axios'
	import {mapState} from 'vuex'
	export default{
		name:"Home",
		components:{
			HomeHeader,
			HomeIcons,
			HomeRecommend,
			HomeSwiper,
			HomeWeekend

		},
		data(){
			return{
				lastCity:'',
				swiperList:[],
				iconList:[],
				recommendList:[],
				weekendList:[]
			}
		},
		computed:{
			...mapState(['city'])
		},
		methods:{
			getHomeInfo(){
				axios.get('/static/mock/index.json?city='+this.city).then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc(res){
     			res = res.data
				if(res.ret && res.data){
					res=res.data
					this.swiperList=res.swiperList
					this.iconList=res.iconList
					this.recommendList=res.recommendList
					this.weekendList=res.weekendList
				}
			}
		},
		mounted(){
			this.lastCity=this.city
			this.getHomeInfo()
		},
		activated(){
			if(this.lastCity!==this.city){
				this.lastCity=this.city
				this.getHomeInfo()
			}
		}


	}
</script>
<style></style>